<template>
    <div class="app-container">
        <el-dialog :title="title" :visible.sync="visible" width="800px" v-if="visible" append-to-body
            :close-on-click-modal="true">
            <div class="im-header">
                <p >可获得分红总人数：{{ tableLs.cocoCustomerAmount }}</p>
                <p >持有CoCo总数: {{ tableLs.cocoAmount }}</p>
                <p >分红系数: {{ tableLs.coefficient }}</p>
            </div>
            <!-- <el-input  v-model="inputContent" class="searchinput" placeholder="请输入用户/手机号/分红金额/当时持有CoCo" prefix-icon="el-icon-search" >
                    <el-button slot="append" class="searchbtn" @click="searchput">搜索</el-button>
            </el-input> -->
            <virtual-scroll
                :data="tables"
                :item-size="62"
                key-prop="customerId"
                @change="(virtualList) => tableData = virtualList"
                :virtualized="true"
            >
            <el-table v-loading="loading" :data="tableData" stripe border  height="500" >
                <virtual-column label="序号" align="center" type="index" width="64px" />
                <el-table-column label="用户" align="center" prop="customerName" />
                <el-table-column label="手机号" align="center" prop="phone" />
                <el-table-column label="分红金额" align="center" prop="bonusMoney" />
                <el-table-column label="当时持有CoCo" align="center" prop="cocoAmount" />
            </el-table>
           </virtual-scroll>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import {
    bonusImitate
} from "@/api/integralOperation/CoCoBonus";
// 解决 el-table 加载数据过多崩溃问题 https://www.jianshu.com/p/282b22a9ca68
import VirtualScroll from 'el-table-virtual-scroll';
import { VirtualColumn } from 'el-table-virtual-scroll';
export default {
    // dicts: ['asset_card_type'],
    name: "Dialog",
    components: {
        'virtual-scroll': VirtualScroll,
        'virtual-column': VirtualColumn
    },
    data() {
        return {
            labelWidth: '120px',
            inputWidth: '400px',
            id: '', //
            submitLoading: false,
            // 是否禁用表单
            disabled: false,
            // 弹出层标题
            title: "模拟结果",
            // 是否显示弹出层
            visible: false,
            loading: false,
            total: 0,
            // 表格数据
            tableLs: [],
            virtualData: [], // 实际数据
            tableData: [], // 虚拟滚动加载显示的数据
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                id:''//CoCo分红id
            },
            searchContent:'',
            inputContent:'',
        };
    },
    created() {

    },
    computed:{
        tables() {
            const search = this.searchContent;
            //当将input框清空时，使列表自动展示搜索前的完整数据，并返回至首页，防止叠加搜索
            if(this.inputContent==''){
                this.searchContent=''
                return this.virtualData;
            }
            if (search!=='') {
                return this.virtualData.filter((dataNews) => {
                    return Object.keys(dataNews).some((key) => {
                        return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
                    });
                });
            }
            return this.virtualData;
        }
    },
    methods: {
        /** 打开发行管理弹框 */
        open(id) {
            this.queryParams.id = id
            this.getBonusImitate()
            this.visible = true
            this.searchContent = ''
            this.inputContent = ''
        },
        // 取消按钮
        cancel() {
            this.visible = false;
        },
        //获取分红详情
        getBonusImitate(id) {
            let data = {
                ...this.queryParams
            }
            this.loading = true
            bonusImitate(data).then(res => {
                this.tableLs = res.result
                this.virtualData = this.tableLs.imitateList
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
       searchput(){
		  this.searchContent=this.inputContent
		  console.log(this.searchContent)
		}
    }
};

</script>
<style scoped>
.img_box {
    width: 100px;
    height: 70px;
    border-radius: 4px;
}

.flex {
    display: flex;
}
.im-header{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   font-size: 16px;
   margin-bottom: 20px;
}
.formula {
    color: #eb1111;
    padding: 0 30px;
    line-height: 24px;
}
.searchinput{
    margin-bottom: 20px;
}
</style>
  